<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首页图表-Nginx上线 | 92-YYDS</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/rz_doc_92/favicon.ico">
    <link rel="apple-touch-icon" href="/rz_doc_92/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/rz_doc_92/assets/css/0.styles.eb696f23.css" as="style"><link rel="preload" href="/rz_doc_92/assets/js/app.c37b6607.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/3.fe9c6282.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/33.45abb40d.js" as="script"><link rel="prefetch" href="/rz_doc_92/assets/js/10.a815e7f8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/11.5cf73907.js"><link rel="prefetch" href="/rz_doc_92/assets/js/12.8364f023.js"><link rel="prefetch" href="/rz_doc_92/assets/js/13.189305ad.js"><link rel="prefetch" href="/rz_doc_92/assets/js/14.28e18334.js"><link rel="prefetch" href="/rz_doc_92/assets/js/15.bc379ff7.js"><link rel="prefetch" href="/rz_doc_92/assets/js/16.63adadba.js"><link rel="prefetch" href="/rz_doc_92/assets/js/17.28e8fcdb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/18.917dcdd1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/19.e231595a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/2.c35adb5c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/20.d1e0017d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/21.4f9461ca.js"><link rel="prefetch" href="/rz_doc_92/assets/js/22.8bd2376c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/23.535f0a8f.js"><link rel="prefetch" href="/rz_doc_92/assets/js/24.c596c341.js"><link rel="prefetch" href="/rz_doc_92/assets/js/25.b3cb2221.js"><link rel="prefetch" href="/rz_doc_92/assets/js/26.fac4fec9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/27.77d2df1d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/28.51cbe5c1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/29.0193e27d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/30.b6174252.js"><link rel="prefetch" href="/rz_doc_92/assets/js/31.985027ac.js"><link rel="prefetch" href="/rz_doc_92/assets/js/32.3dd61489.js"><link rel="prefetch" href="/rz_doc_92/assets/js/34.91103b73.js"><link rel="prefetch" href="/rz_doc_92/assets/js/35.2a882fa8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/36.3b80d6cf.js"><link rel="prefetch" href="/rz_doc_92/assets/js/37.11f329d1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/38.974df1fd.js"><link rel="prefetch" href="/rz_doc_92/assets/js/39.7cc0e285.js"><link rel="prefetch" href="/rz_doc_92/assets/js/4.219d9d15.js"><link rel="prefetch" href="/rz_doc_92/assets/js/40.a928365a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/41.6be66339.js"><link rel="prefetch" href="/rz_doc_92/assets/js/42.31ef2deb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/43.9b423721.js"><link rel="prefetch" href="/rz_doc_92/assets/js/44.f020f7e9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/45.79487c7e.js"><link rel="prefetch" href="/rz_doc_92/assets/js/5.b9d7eb6d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/6.af284094.js"><link rel="prefetch" href="/rz_doc_92/assets/js/7.2449c640.js"><link rel="prefetch" href="/rz_doc_92/assets/js/8.e6bfdace.js"><link rel="prefetch" href="/rz_doc_92/assets/js/9.4f10b15a.js">
    <link rel="stylesheet" href="/rz_doc_92/assets/css/0.styles.eb696f23.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rz_doc_92/" class="home-link router-link-active"><img src="/rz_doc_92/doraameng.jpg" alt="92-YYDS" class="logo"> <span class="site-name can-hide">92-YYDS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link router-link-active">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link router-link-active">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/01" class="sidebar-heading clickable"><span>1-基础环境搭建</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/02" class="sidebar-heading clickable"><span>2-登录模块-主页鉴权</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/03" class="sidebar-heading clickable"><span>3-主页模块-修改密码</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/04" class="sidebar-heading clickable"><span>4-组织架构</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/05" class="sidebar-heading clickable"><span>5-组织架构-角色管理</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/06" class="sidebar-heading clickable"><span>6-角色管理-员工管理</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/07" class="sidebar-heading clickable"><span>7-员工管理-上传下载</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/08" class="sidebar-heading clickable"><span>8-Cos上传和权限数据</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/09" class="sidebar-heading clickable"><span>9-权限应用-首页</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/rz/10" class="sidebar-heading clickable open active"><span>10-首页图表-Nginx上线</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/rz_doc_92/rz/10.html" aria-current="page" class="active sidebar-link">首页图表-Nginx上线</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_1-首页-echarts图表的应用" class="sidebar-link">1.首页-echarts图表的应用</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_2-首页-echarts图表的按需导入" class="sidebar-link">2.首页-echarts图表的按需导入</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_3-路由模式-将路由改成history模式" class="sidebar-link">3.路由模式-将路由改成history模式</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_4-打包分析-分析" class="sidebar-link">4. 打包分析-分析</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_5-cdn加速" class="sidebar-link">5.CDN加速</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_6-项目打包-安装nginx" class="sidebar-link">6.项目打包-安装nginx</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_7-mac-windows环境下nginx部署启动项目" class="sidebar-link">7.mac/windows环境下nginx部署启动项目</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_8-nginx解决history的404问题" class="sidebar-link">8.nginx解决history的404问题</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/rz/10.html#_9-nginx配置代理解决生产环境跨域问题" class="sidebar-link">9.nginx配置代理解决生产环境跨域问题</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="首页图表-nginx上线"><a href="#首页图表-nginx上线" class="header-anchor">#</a> 首页图表-Nginx上线</h1> <h2 id="_1-首页-echarts图表的应用"><a href="#_1-首页-echarts图表的应用" class="header-anchor">#</a> 1.首页-echarts图表的应用</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677843414405-1bc80c4f-0036-41d0-a343-345acca4be97.png#averageHue=%23cbefed&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=265&amp;id=u96585014&amp;name=image.png&amp;originHeight=530&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2718596&amp;status=done&amp;style=none&amp;taskId=u8859e143-2236-4f0b-9ce5-861d6faeeb5&amp;title=&amp;width=640" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677843432463-2fbfe16a-ce1b-4fb5-b844-aa0cd09b394c.png#averageHue=%2396bddc&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=287&amp;id=u0df0add9&amp;name=image.png&amp;originHeight=574&amp;originWidth=1850&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=134460&amp;status=done&amp;style=none&amp;taskId=u86f2fcd2-c05d-421c-bd42-e8de9e264e3&amp;title=&amp;width=925" alt="image.png"></p> <ul><li>安装echarts包</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> i echarts 
$ <span class="token function">yarn</span> <span class="token function">add</span> echarts
</code></pre></div><ul><li>放置两个图表的div，并给定高宽，代码位置(<strong>src/views/dashboard/index.vue</strong>)</li></ul> <div class="language-html extra-class"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 图表 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>social<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> width: 100%; height:100% <span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token comment">&lt;!-- 图表 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>provident<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> width: 100%; height:100% <span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>在mounted中初始化图表-代码位置(<strong>src/views/dashboard/index.vue</strong>)</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> CountTo <span class="token keyword">from</span> <span class="token string">'vue-count-to'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getHomeData<span class="token punctuation">,</span> getMessageList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/home'</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span> <span class="token comment">// 引入所有的echarts</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    CountTo
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">homeData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 存放首页数据的对象</span>
      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 计算属性</span>
  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span> <span class="token string">'company'</span><span class="token punctuation">,</span> <span class="token string">'departmentName'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 映射给了计算属性</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">homeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>homeData<span class="token punctuation">)</span>
      <span class="token comment">// 设置图表</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>social<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>homeData<span class="token punctuation">.</span>socialInsurance<span class="token operator">?.</span>xAxis
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>homeData<span class="token punctuation">.</span>socialInsurance<span class="token operator">?.</span>yAxis<span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#04c9be'</span> <span class="token comment">// 填充颜色</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#04c9be'</span> <span class="token comment">// 线的颜色</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>provident<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>homeData<span class="token punctuation">.</span>providentFund<span class="token operator">?.</span>xAxis
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>homeData<span class="token punctuation">.</span>providentFund<span class="token operator">?.</span>yAxis<span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#04c9be'</span> <span class="token comment">// 填充颜色</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#04c9be'</span> <span class="token comment">// 线的颜色</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHomeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMessageList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取展示的数据 设置给图表</span>
    <span class="token comment">// 监听homeData的变化</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>social <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>social<span class="token punctuation">)</span> <span class="token comment">// 初始化echart</span>
    <span class="token comment">// data中没有声明 不是响应式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>provident <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>provident<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">getHomeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getHomeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>homeData <span class="token operator">=</span> res<span class="token punctuation">.</span>data
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token keyword">async</span> <span class="token function">getMessageList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getMessageList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> res<span class="token punctuation">.</span>data
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>这里为什么要用watch，因为获取数据在created，初始化图表在mounted，执行mouted时，数据并不能保证能够获取到，所以采用获取watch监听数据变化，只要数据变化，就设置图表的options</p></blockquote> <blockquote><p>为什么 this.social和this.provident 并没有在data中声明，注意，在data中声明的表示它是响应式数据，即它的变化要引起template模板的刷新，但是这里我们只是记录一下当前图表的实例，实例本身会有setOption来影响图表的动态渲染，所以这里并没有必要在data中声明这两个变量</p></blockquote> <h2 id="_2-首页-echarts图表的按需导入"><a href="#_2-首页-echarts图表的按需导入" class="header-anchor">#</a> 2.首页-echarts图表的按需导入</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677843874842-3c458a40-1b7f-4de7-88e3-7a23abe03dcb.png#averageHue=%23cbefed&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=265&amp;id=u9430f006&amp;name=image.png&amp;originHeight=530&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2718596&amp;status=done&amp;style=none&amp;taskId=u1a4e09b4-7088-4f5e-9419-926538f5fc8&amp;title=&amp;width=640" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677843886811-efc90a51-99f2-4921-8c52-554a862bfe3c.png#averageHue=%2382594b&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=253&amp;id=ue7b77bea&amp;name=image.png&amp;originHeight=506&amp;originWidth=1422&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=74387&amp;status=done&amp;style=none&amp;taskId=ubaa738ab-9330-4e7c-af81-aaf4fa5041d&amp;title=&amp;width=711" alt="image.png"></p> <ul><li>echarts图表的按需导入-代码位置(<strong>src/views/dashboard/index.vue</strong>)</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span> <span class="token comment">// 引入核心包</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> LineChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span> <span class="token comment">// 引入折线图</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> GridComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span> <span class="token comment">// 引入组件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span>
echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  LineChart<span class="token punctuation">,</span>
  GridComponent<span class="token punctuation">,</span>
  CanvasRenderer
<span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_3-路由模式-将路由改成history模式"><a href="#_3-路由模式-将路由改成history模式" class="header-anchor">#</a> 3.路由模式-将路由改成history模式</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677843996006-6a4c7eba-43a4-46e4-8594-d6e840c2fde0.png#averageHue=%23fdfbfb&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=234&amp;id=u8549b434&amp;name=image.png&amp;originHeight=468&amp;originWidth=2202&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=108281&amp;status=done&amp;style=none&amp;taskId=u6a32e7fa-71df-4ce7-b968-033ff6063e1&amp;title=&amp;width=1101" alt="image.png"></p> <ul><li><p>hash模式带#，#后面的地址变化不会引起页面的刷新</p></li> <li><p>history没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新-webpack配置）</p></li> <li><p>将路由模式修改成history模式-代码位置(<strong>src/router/index.js)</strong></p></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function">createRouter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span><span class="token punctuation">,</span> <span class="token comment">// require service support</span>
  <span class="token function-variable function">scrollBehavior</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> constantRoutes <span class="token comment">// 默认引入静态路由</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_4-打包分析-分析"><a href="#_4-打包分析-分析" class="header-anchor">#</a> 4. 打包分析-分析</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677844109668-4e5f5692-e760-4799-8956-cacd246c1d45.png#averageHue=%23f8f8db&amp;clientId=u6a4ee274-1cea-4&amp;from=paste&amp;height=114&amp;id=ue6328082&amp;name=image.png&amp;originHeight=228&amp;originWidth=1990&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=40337&amp;status=done&amp;style=none&amp;taskId=u35846a2a-c930-410e-bd0e-9163cd4374b&amp;title=&amp;width=995" alt="image.png"></p> <ul><li>打包分析代码</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> run preview -- <span class="token parameter variable">--report</span>
</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677860576748-d3af499b-ca5c-404f-94a7-e292c86d15a9.png#averageHue=%23c7e59a&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=258&amp;id=uc335b4cd&amp;name=image.png&amp;originHeight=516&amp;originWidth=954&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=381245&amp;status=done&amp;style=none&amp;taskId=u9b2b4566-a99b-4c00-9dda-afa6f7785e1&amp;title=&amp;width=477" alt="image.png"></p> <ul><li>去除main.js中对于mock.js的引用</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677860606834-11a34fdd-46a1-4f2a-b8c7-3cecfde531a5.png#averageHue=%234b4b4b&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=112&amp;id=u9136f2ff&amp;name=image.png&amp;originHeight=224&amp;originWidth=820&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=37215&amp;status=done&amp;style=none&amp;taskId=u7fae7a2a-a05c-4803-95b7-707b1d24b7c&amp;title=&amp;width=410" alt="image.png"></p> <h2 id="_5-cdn加速"><a href="#_5-cdn加速" class="header-anchor">#</a> 5.CDN加速</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677860649908-9d614b46-8fa1-41f2-b132-6218fe6fac55.png#averageHue=%23cbe4a5&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=327&amp;id=u75f63725&amp;name=image.png&amp;originHeight=653&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3349503&amp;status=done&amp;style=none&amp;taskId=uc06712a7-08ba-497e-b03c-631e4e09408&amp;title=&amp;width=640" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677860641069-726b7fb7-2724-4e23-b574-08b82fc9eb8e.png#averageHue=%23cadeee&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=128&amp;id=u07a5e314&amp;name=image.png&amp;originHeight=256&amp;originWidth=1288&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=27504&amp;status=done&amp;style=none&amp;taskId=u25dc44c1-df7f-484b-936f-34eca798b29&amp;title=&amp;width=644" alt="image.png"></p> <blockquote><p>将几个比较大的多在打包时排除，这样可以缩小整体打包的大小，保证js的加载速度，排除的包采用cdn的方式用外链去引入，cdn本名为分发服务器，意为更近的访问区间更快的访问速度将所需要的文件返回给客户端</p></blockquote> <ul><li>webpack排除打包-代码位置(<strong>vue.config.js</strong>)</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token literal-property property">configureWebpack</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// provide the app's title in webpack's name field, so that</span>
    <span class="token comment">// it can be accessed in index.html to inject the correct title.</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
    <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'@'</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 配置需要排出的包</span>
    <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string-property property">'vue'</span><span class="token operator">:</span> <span class="token string">'Vue'</span><span class="token punctuation">,</span>
      <span class="token string-property property">'element-ui'</span><span class="token operator">:</span> <span class="token string">'ELEMENT'</span><span class="token punctuation">,</span>
      <span class="token string-property property">'cos-js-sdk-v5'</span><span class="token operator">:</span> <span class="token string">'COS'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>在html中采用外链引入排除的文件-代码位置(<strong>public/index.html</strong>)</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge,chrome=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&lt;%= BASE_URL %&gt;favicon.ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&lt;%= webpackConfig.name %&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noscript</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>We're sorry but &lt;%= webpackConfig.name %&gt; doesn't work properly without JavaScript enabled. Please enable it to continue.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>noscript</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- built files will be auto injected --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h2 id="_6-项目打包-安装nginx"><a href="#_6-项目打包-安装nginx" class="header-anchor">#</a> 6.项目打包-安装nginx</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861215372-0e121332-d5bd-4a39-90da-cf8bd02ad3bb.png#averageHue=%23fdfdfd&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=304&amp;id=ue9acc474&amp;name=image.png&amp;originHeight=608&amp;originWidth=2066&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=84252&amp;status=done&amp;style=none&amp;taskId=ua1ea17a8-fc55-403a-b0a8-eed1a691c18&amp;title=&amp;width=1033" alt="image.png"></p> <ul><li>执行打包命令</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> run build:prod
$ <span class="token function">yarn</span> build:prod
</code></pre></div><blockquote><p>得到dist文件包</p></blockquote> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861289047-75b91eb0-124e-4e57-af00-fb10f254f90d.png#averageHue=%231e2b35&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=121&amp;id=ua0d8f63f&amp;name=image.png&amp;originHeight=597&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3062262&amp;status=done&amp;style=none&amp;taskId=u001517dc-4838-4bb6-8f6d-2355386d9d5&amp;title=&amp;width=260" alt="image.png"></p> <ul><li>安装nginx-mac</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ brew <span class="token function">install</span> nginx  <span class="token comment"># mac安装nginx</span>
</code></pre></div><ul><li>查看版本-mac</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ nginx <span class="token parameter variable">-v</span>  <span class="token comment"># 查看版本</span>
</code></pre></div><ul><li>查看nginx-mac</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ brew info nginx <span class="token comment">#查看nginx</span>
</code></pre></div><ul><li>nginx-windows版本</li></ul> <blockquote><p>直接解压就可以直接使用</p></blockquote> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861435558-15cfdbf2-3a3a-4c7d-b036-8ed7d3c6a2ad.png#averageHue=%23fbfbfb&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=190&amp;id=u778fd62c&amp;name=image.png&amp;originHeight=380&amp;originWidth=862&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=38390&amp;status=done&amp;style=none&amp;taskId=ub5348533-01e7-4082-9f3f-9c137c8655b&amp;title=&amp;width=431" alt="image.png"></p> <p>注意：<strong>mac安装</strong>可能遇到的问题</p> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861482662-8497aa6d-35f2-4a64-b6a5-828135ac94a9.png#averageHue=%23173c46&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=97&amp;id=ue091659c&amp;name=image.png&amp;originHeight=194&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=995160&amp;status=done&amp;style=none&amp;taskId=u48ee8f82-60c6-447a-aaf4-3374a861d86&amp;title=&amp;width=640" alt="image.png">
遇到某个包发生错误，直接使用brew安装这个包，再安装nginx</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$ brew <span class="token function">install</span> pcre2  <span class="token comment"># 安装出错的包</span>
$ brew <span class="token function">install</span> nginx  <span class="token comment"># 安装nginx</span>
</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861513259-ad09f8a0-71a2-427f-817b-40af94130ed2.png#averageHue=%233b4349&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=122&amp;id=u48f6e853&amp;name=image.png&amp;originHeight=244&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=1251622&amp;status=done&amp;style=none&amp;taskId=u5b127742-cc2b-449d-bf4b-20b2a721e45&amp;title=&amp;width=640" alt="image.png">
遇到这个错误，可以直接执行该命令，安装对应的工具，再安装nginx</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$  xcode-select <span class="token parameter variable">--install</span>  <span class="token comment"># 安装对应工具</span>
$  brew <span class="token function">install</span> nginx  <span class="token comment"># 安装nginx</span>
</code></pre></div><h2 id="_7-mac-windows环境下nginx部署启动项目"><a href="#_7-mac-windows环境下nginx部署启动项目" class="header-anchor">#</a> 7.mac/windows环境下nginx部署启动项目</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861587484-c1541d97-1b35-4597-b336-fd9b797de83a.png#averageHue=%239dc2df&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=65&amp;id=u271b3125&amp;name=image.png&amp;originHeight=130&amp;originWidth=1742&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=31679&amp;status=done&amp;style=none&amp;taskId=ud8b2cf52-5929-4627-aaea-ddc83f960dc&amp;title=&amp;width=871" alt="image.png"></p> <ul><li>mac查看nginx的相关目录</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>brew info nginx <span class="token comment">#查看nginx</span>

</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861609109-f1747f8c-ea6b-4808-a5f1-a7972c82a332.png#averageHue=%23191919&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=360&amp;id=u263cc82e&amp;name=image.png&amp;originHeight=720&amp;originWidth=998&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2879691&amp;status=done&amp;style=none&amp;taskId=ub82426c4-8e6f-4c9e-9370-e74b022a2ac&amp;title=&amp;width=499" alt="image.png"></p> <p>mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3
mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf</p> <ul><li>将打包的文件放置到安装目录/html下</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861665031-da2a64e6-7b58-4b59-8652-f38284a9215f.png#averageHue=%23f5f5f5&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=192&amp;id=u571941af&amp;name=image.png&amp;originHeight=720&amp;originWidth=1133&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3269115&amp;status=done&amp;style=none&amp;taskId=u0e93a61d-0fc7-4206-9084-102defd7494&amp;title=&amp;width=302.5" alt="image.png"></p> <ul><li>mac-启动服务命令</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx <span class="token comment">#启动命令</span>

</code></pre></div><ul><li>mac-重启服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx <span class="token parameter variable">-s</span> stop  <span class="token comment">#停止命令</span>

</code></pre></div><blockquote><p>注意： mac版本的nginx的默认端口为8080</p></blockquote> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861743190-64ba2366-f63c-4566-bf73-eb4d1355ac1b.png#averageHue=%239aa8a3&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=360&amp;id=u9057323c&amp;name=image.png&amp;originHeight=720&amp;originWidth=1206&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3479702&amp;status=done&amp;style=none&amp;taskId=ud9b5b029-de3c-4b14-ad17-6a093462e8b&amp;title=&amp;width=603" alt="image.png"></p> <ul><li>windows版本启动服务</li> <li><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861771519-bca919e2-2d6a-456e-bd44-c3143be8b611.png#averageHue=%23fdfcfa&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=215&amp;id=u1bb29196&amp;name=image.png&amp;originHeight=1070&amp;originWidth=720&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3087736&amp;status=done&amp;style=none&amp;taskId=ud3bf29f4-b08f-472e-b254-74e03f3bc35&amp;title=&amp;width=145" alt="image.png"><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861787675-9dd348f5-86b5-4a6b-a0cb-b95740ba169d.png#averageHue=%23fafafa&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=133&amp;id=ue8a9d2bf&amp;name=image.png&amp;originHeight=380&amp;originWidth=1614&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=61192&amp;status=done&amp;style=none&amp;taskId=u6b6997bd-db6f-45a3-b3e2-2ed22ce2882&amp;title=&amp;width=565" alt="image.png"></li> <li>windows下停止服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ ./nginx <span class="token parameter variable">-s</span> stop  <span class="token comment">#停止命令</span>

</code></pre></div><p>注意: nginx默认的访问端口为80</p> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861833368-8a533b5b-35f7-498c-8041-1fb4f334f8e6.png#averageHue=%23557367&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=360&amp;id=u69ca2001&amp;name=image.png&amp;originHeight=720&amp;originWidth=1257&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3626818&amp;status=done&amp;style=none&amp;taskId=u3d1bfd72-7fe8-47d3-9871-0618cbb5af0&amp;title=&amp;width=628.5" alt="image.png"></p> <h2 id="_8-nginx解决history的404问题"><a href="#_8-nginx解决history的404问题" class="header-anchor">#</a> 8.nginx解决history的404问题</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861855748-b9e3b549-1f04-4f89-a824-9c95f8d9a6af.png#averageHue=%23d5d8e3&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=118&amp;id=ua9d13a47&amp;name=image.png&amp;originHeight=236&amp;originWidth=2134&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=66400&amp;status=done&amp;style=none&amp;taskId=uadbbd4c3-450f-4d6f-b0f6-aa8339cd9c8&amp;title=&amp;width=1067" alt="image.png"></p> <ul><li>修改mac-windows配置文件</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>location / <span class="token punctuation">{</span>
   try_files <span class="token variable">$uri</span> <span class="token variable">$uri</span>/ /index.html<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>设置不论请求什么地址，都返回index.html</p></blockquote> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861939613-eba82e02-4e61-47a6-9bdc-e63290fbf604.png#averageHue=%23030303&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=32&amp;id=u6dd0b12f&amp;name=image.png&amp;originHeight=64&amp;originWidth=366&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=4911&amp;status=done&amp;style=none&amp;taskId=u69e55578-dd36-4974-a0c8-ffbf6e32eb8&amp;title=&amp;width=183" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861958095-3583ae30-2f69-4fd4-a676-951bd60286b9.png#averageHue=%23f7f7f7&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=360&amp;id=u5455ae9a&amp;name=image.png&amp;originHeight=720&amp;originWidth=930&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2683533&amp;status=done&amp;style=none&amp;taskId=udcb50778-09a1-4103-974d-89492babe6d&amp;title=&amp;width=465" alt="image.png">
windows配置文件
<img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677861973536-3b3ed9fd-bb6f-4d47-8638-42e60e661062.png#averageHue=%23fcfcfc&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=483&amp;id=u67d37f66&amp;name=image.png&amp;originHeight=966&amp;originWidth=720&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2787618&amp;status=done&amp;style=none&amp;taskId=u8bcf6c8e-1962-4663-927c-0c23c1a59cd&amp;title=&amp;width=360" alt="image.png"></p> <ul><li>mac重启服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx <span class="token parameter variable">-s</span> reload  <span class="token comment">#重启</span>
</code></pre></div><ul><li>windows重启服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ ./nginx <span class="token parameter variable">-s</span> reload  <span class="token comment">#重启</span>
</code></pre></div><h2 id="_9-nginx配置代理解决生产环境跨域问题"><a href="#_9-nginx配置代理解决生产环境跨域问题" class="header-anchor">#</a> 9.nginx配置代理解决生产环境跨域问题</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677862046625-2fba1cae-6d0b-4edd-91e9-ed18094987d3.png#averageHue=%23cdcbcb&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=244&amp;id=ua9c9499a&amp;name=image.png&amp;originHeight=488&amp;originWidth=1882&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=144717&amp;status=done&amp;style=none&amp;taskId=uc6be76e8-33b0-436e-9cbf-c9c22416db6&amp;title=&amp;width=941" alt="image.png"> <img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677862058407-f6b3725c-a57c-4711-acff-3088574d814b.png#averageHue=%23fdfdfd&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=270&amp;id=uf3364958&amp;name=image.png&amp;originHeight=540&amp;originWidth=1918&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=53889&amp;status=done&amp;style=none&amp;taskId=uda212cc3-d7e4-47b7-83bf-5b394037c9d&amp;title=&amp;width=959" alt="image.png"></p> <ul><li>nginx解决生产环境跨域</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/8435673/1677862085701-af444e51-9d9a-459c-b155-d852fa19a98b.png#averageHue=%23b3cfe6&amp;clientId=u0f540d11-b7d4-4&amp;from=paste&amp;height=86&amp;id=u408d2eba&amp;name=image.png&amp;originHeight=172&amp;originWidth=1286&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=23695&amp;status=done&amp;style=none&amp;taskId=u93f5218b-6b17-4370-8202-2a8e07430b9&amp;title=&amp;width=643" alt="image.png"></p> <ul><li>修改配置文件</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>location /prod-api  <span class="token punctuation">{</span>
  proxy_pass https://heimahr-t.itheima.net<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>mac重启服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx <span class="token parameter variable">-s</span> reload  <span class="token comment">#重启</span>
</code></pre></div><ul><li>windows重启服务</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>$ ./nginx <span class="token parameter variable">-s</span> reload  <span class="token comment">#重启</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/rz_doc_92/rz/09.html" class="prev">
        权限应用-首页
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/rz_doc_92/assets/js/app.c37b6607.js" defer></script><script src="/rz_doc_92/assets/js/3.fe9c6282.js" defer></script><script src="/rz_doc_92/assets/js/33.45abb40d.js" defer></script>
  </body>
</html>
